<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>易知学社</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">
		<link rel="stylesheet" type="text/css" href="/assets/web/css/double.css" />
		<link rel="stylesheet" type="text/css" href="/assets/web/css/course.css" />
		<script src="/assets/web/js/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<!-- 底部 -->
		<div class="footer">
			<div class="collection">
				<img src="/assets/web/img/collection2x.png">
				<span>收藏</span>
			</div>
			<script type="text/javascript">
				 $(".collection").click(function(){
				        if($('.collection img').attr('src')=='/assets/web/img/collection2x.png'){
				         $('.collection img').attr('src','/assets/web/img/shoucang.png');
				     }else{
				         $('.collection img').attr('src','/assets/web/img/collection2x.png');
				     }
				    })
			</script>
			<a href="sure.html">购买单节</a>
			<a href="sure.html">购买整套</a>
		</div>
		<!-- 视频 -->
		<div class="video">
			<video width="100%" height="250px"
				   @for(item in videoList){
				    @if(itemLP.index==1){
				     src="${item.video}"
				      @}
				   @}
				 controls="controls" id="video">

			</video>
			<span class="prompt" style="display:none">购买后可观看</span>
		</div>
		<!-- 课程介绍 -->
		<div class="center">
			<div class="top">
				<div class="title">
					<h2>${course.name}</h2><span>${category.name}</span>
					<p>【${course.intro}】</p>
				</div>
				<div class="share">
					<a href="share.html">
						<img src="/assets/web/img/fenxiang2x.png" >
						<p>分享</p>
					</a>
				</div>
			</div>
			<div class="bottom">
				<p class="price">
					¥${course.price} <del>¥${course.orgPrice}</del>
				</p>
				<p>
					${course.people}人已学习
				</p>
			</div>
		</div>
		<!-- 内容tab -->
		<div class="course_tab">
			<div class="select-list">
				<ul class="clearfix">
					<li class="fl over">课程详情</li>
					<li class="fl">课程目录</li>
				</ul>
			</div>
			<div class="content-list">
				<ul>
					<li class="over content">
						${course.content}

					</li>
					<li class="details">
						@for(item in videoList){
						<a onclick="changeVideo('${item.video}')">
							<h3>${itemLP.index}、${item.name}</h3>
							<img src="/assets/web/img/lock2x.png" >
						</a>
						@}
					</li>
				</ul>
			</div>
		</div>
		<script type="text/javascript">
			$(function(){
				$('.select-list li').click(function(){
					$(this).addClass('over').siblings('li').removeClass('over');
					$('.content-list li').removeClass('over').eq($(this).index()).addClass('over');
				})
			})
		</script>
	</body>
</html>
<script>
	function changeVideo(url){

		$("#video").attr("src",url);

	}



</script>
